import { Checkbox, Col, Row, Space } from 'antd';
import React, { useMemo } from 'react';
import { SubTitle } from '../../../SubTitle';
import { CommonField } from '../field';
import Style from './index.module.less';
const PaddingItem = Symbol('');
function getOptionValue(el) {
    if (typeof el === 'object') {
        return el.value;
    }
    return el;
}
function getOptionLabel(el) {
    if (typeof el === 'object') {
        return el.label;
    }
    return el;
}
/**
 * check box group
 * 有全选 反选 标题 功能
 */
export const CheckboxGroupField = (props) => {
    const { options = [], title, titleAction, suffixAction, numCol, value = [], onChange, ...args } = props;
    const checkAll = value.length === options.length;
    const indeterminate = value.length > 0 && value.length < options.length;
    const renderAction = (actions) => {
        return actions.map((action, index) => ({
            all: (<CommonField key={index} Component={Checkbox} props={{
                    size: 'small',
                    checked: checkAll,
                    indeterminate,
                    children: '全选',
                    onChange: (e) => {
                        onChange?.((e.target.checked ? options : []).map((el) => getOptionValue(el)));
                    },
                }}/>),
            invert: (<CommonField key={index} Component={Checkbox} props={{
                    size: 'small',
                    checked: true,
                    children: '反选',
                    onChange: () => {
                        const current = new Set(value);
                        onChange?.(options.filter((item) => !current.has(getOptionValue(item))).map((el) => getOptionValue(el)));
                    },
                }}/>),
        }[action]));
    };
    const renderOptions = useMemo(() => {
        const newOptions = [...options];
        return numCol
            ? new Array(Math.ceil(newOptions.length / numCol)).fill([]).map((_) => {
                const items = newOptions.splice(0, numCol);
                return items.concat(new Array(numCol - items.length).fill(PaddingItem));
            })
            : [];
    }, [options, numCol]);
    return (<div>
      <SubTitle {...title} title={<Space>
            {title?.title}
            {titleAction && renderAction(titleAction)}
          </Space>} suffix={<Space>
            {title?.suffix}
            {suffixAction && renderAction(suffixAction)}
          </Space>}/>
      <CommonField Component={Checkbox.Group} props={{
            value,
            onChange,
            options: numCol ? undefined : options,
            children: numCol &&
                renderOptions.map((el, pIndex) => (<Row key={pIndex} className={Style.row}>
                {el.map((item, index) => (<Col flex={`${100 / numCol}%`} key={`${pIndex}${index}`}>
                    {item === PaddingItem ? (<React.Fragment />) : (<CommonField Component={Checkbox} props={{
                                size: 'small',
                                value: getOptionValue(item),
                                children: getOptionLabel(item),
                            }}/>)}
                  </Col>))}
              </Row>)),
            ...args,
        }}/>
    </div>);
};
export default CheckboxGroupField;
